<template>

  <div class="allinfo"
       style="height:900px">
    <div class="hhh"
         style="height:50px">
      <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">打包单详情</span>
      <div class="submitandcancel">
        <el-button type="primary"
                   icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        <el-button plain
                   icon="el-icon-printer ">打印</el-button>
        <el-button plain
                   icon="el-icon-s-order">完成</el-button>
        <el-button plain
                   icon="el-icon-edit">编辑</el-button>
        <el-button type="primary"
                   icon="el-icon-top-left"
                   @click="back">返回</el-button>
      </div>

    </div>

    <hr>
    <!-- 基本信息栏 -->
    <div>
      <!-- 第二行 -->
      <div>
        <span class="infoborder">基本信息</span>
      </div>
      <!-- 打包单信息 -->
      <div style="margin-top:20px">
        <el-form :inline="true"
                 label-width="80px"
                 :model="formLabelAlign">
          <el-row>
            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="表单类型">
                  {{bigpackdata.formTypes}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="制单人">
                  {{bigpackdata.createdBy}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="制单时间"
                                      :disabled="true">
                  {{bigpackdata.createdTime.substring(0, 19)
              .replace('T', ' ')}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="单号"
                                      :disabled="true">
                  {{bigpackdata.packingNumber}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="客户"
                                      placeholder="请选择">
                  {{bigpackdata.customer}}
                  <!-- <el-option v-for="item in formLabelAlign.customer"
                             :key="item.label"
                             :label="item.label"
                             :value="item.value">
                  </el-option> -->
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="区域"
                                      placeholder="请选择">
                  {{bigpackdata.region}}
                  <!-- <el-option v-for="item in formLabelAlign.region"
                             :key="item.label"
                             :label="item.label"
                             :value="item.value">
                  </el-option> -->
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="打包总重"
                                      :disabled="true">
                  {{bigpackdata.weight}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>

            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="产品数量"
                                      :disabled="true">
                  {{bigpackdata.nums}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="7">
              <el-descriptions>
                <el-descriptions-item label="总打包费"
                                      :disabled="true">
                  {{bigpackdata.processCost}}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <!-- 打包信息列表 -->
    <div>
      <div style="height:40px">
        <span class="infoborder">打包信息</span>
        <!-- <el-button type="primary"
                     style="float:right"
                     @click="table = true;find()">
            <i class="el-icon-circle-plus-outline" />添加
          </el-button> -->
      </div>

      <el-table :data="packproductlist"
                style="width: 100%">
        <el-table-column prop="packingNum"
                         label="打包编号">
        </el-table-column>
        <el-table-column prop="warehouse"
                         label="仓库">
        </el-table-column>

        <el-table-column prop="weight"
                         label="重量"
                         width="100">
        </el-table-column>
        <el-table-column prop="nums"
                         label="数量"
                         width="100">
        </el-table-column>
        <el-table-column prop="processCost"
                         label="分包打包费"
                         width="100">
        </el-table-column>
        <el-table-column prop="createdTime"
                         label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createdTime.substring(0, 19)
              .replace('T', ' ')}}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success"
                       icon="el-icon-search"
                       circle
                       @click.native.prevent="searchRowPack(scope.$index, packproductlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 产品信息栏 -->
    <div>
      <div :hidden="productShow">
        <div style="height:40px">
          <span class="infoborder">产品信息</span>
          <!-- <el-button type="primary"
                     style="float:right"
                     @click="drawer = true,pack()">
            <i class="el-icon-circle-plus-outline" />打包
          </el-button>
          <el-button type="primary"
                     style="float:right"
                     @click="table = true;find()">
            <i class="el-icon-circle-plus-outline" />添加
          </el-button> -->
        </div>
        <!-- 产品信息 -->
        <el-table :data="selectorderlist"
                  style="width: 100%">
          <el-table-column prop="id"
                           type="index"
                           label="序号"
                           width="50">
          </el-table-column>
          <el-table-column prop="productInfo"
                           label="产品信息">
          </el-table-column>
          <el-table-column prop="productName"
                           label="产品名称">
          </el-table-column>
          <el-table-column prop="productCode"
                           label="条码">
          </el-table-column>
          <el-table-column prop="customer"
                           label="客户">
          </el-table-column>
          <el-table-column prop="region"
                           label="区域">
          </el-table-column>
          <el-table-column prop="condition"
                           label="成色">
          </el-table-column>
          <el-table-column prop="weight"
                           label="重量"
                           width="50">
          </el-table-column>
          <el-table-column prop="nums"
                           label="数量"
                           width="50">
          </el-table-column>
          <el-table-column prop="perGram"
                           label="克工费"
                           width="100">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger"
                         icon="el-icon-delete"
                         circle
                         @click.native.prevent="deleteRow(scope.$index, selectorderlist)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>
    </div>
    <!-- <button @click="test">测试</button> -->
  </div>
</template>

<script>
import addPacking from '@/api/sale/packing/addPacking'
import packingList from '@/api/sale/packing/packingList'
export default {
  data() {
    return {
      //控制产品列表的显示和隐藏
      productShow: true,
      //抽屉状态
      drawer: false,
      //选货单状态
      formstatus: '',
      //制单时间
      makingtime: this.getTime(),
      count: 0,
      //将基础信息和产品信息同时传过去
      selectgoodsinfo: {
        basicinfo: {},
        goodsinfo: {},
      },
      //打包信息
      packdata: {
        warehouse: '', //仓库
        region: 0, //区域
        createdBy: 'CHL',
        weight: '',
        nums: '',
        processCost: '', //打包费
        packngId: '', //这是大包的产品编号 用来区分到底是哪个大包下面的小包
        packingNum: '',
        createdTime: '',
        //被选中产品id
        packingId: [],
      },
      // 大的打包单
      bigpackdata: {
        //打包单的id
        id: '',
        // formTypes: '', //表单类型
        packingNumber: '', //打包单编号
        // customer: '', //客户
        // region: '', //区域
        // createdBy: 'CHL', //打包单制作人
        // createdTime: '', //打包单创建时间
        // weight: 0, //分包重量之和
        // nums: 0, //分包数量
        // processCost: 0, // 总的打包费
        // packingStatus: 1, //打包单状态  表示编辑状态
        // pid: '', //传过来的选货单id
      },

      //产品栏展示的内容
      selectorderlist: [],
      //打包栏展示的内容
      packproductlist: [],
      // 添加商品信息
      table: false,
      loading: false,
      //弹出框展示的内容
      gridData: [],
      //已勾选的产品内容
      multipleSelection: [],
    }
  },
  methods: {
    //抽屉相关方法
    // //插入打包信息表
    // insertPackingMsg() {
    //   if (this.selectorderlist.length != 0) {
    //     //前端传  2022-04-22 16:51:16时间 ，后端不能接收，
    //     //必须把中间的空格替换成T  变成2022-04-22T16:51:16,后端才可以转换对应的参数
    //     this.packdata.createdTime = this.packdata.createdTime.replace(' ', 'T')
    //     console.log(this.packdata.createdTime)
    //     addPacking.insertPackingMsg(this.packdata).then((res) => {
    //       console.log(res)
    //       this.$message.success(res.message)
    //       addPacking
    //         .selectPackingMsgByPackingNum(this.packdata.packngId)
    //         .then((res) => {
    //           console.log(res)
    //           let data2 = res.data
    //           for (const index in data2) {
    //             if (data2[index].warehouse == 1) {
    //               data2[index].warehouse = 'A仓库'
    //             }
    //             if (data2[index].warehouse == 2) {
    //               data2[index].warehouse = 'B仓库'
    //             }
    //             if (data2[index].warehouse == 3) {
    //               data2[index].warehouse = 'C仓库'
    //             }
    //           }
    //           console.log(data2)
    //           this.packproductlist = data2
    //           //点击打包的确定按钮后计算总重
    //           //遍历获得选中的重量
    //           let weightcount = 0
    //           let numscount = 0
    //           let processCostcount = 0
    //           for (let i = 0; i < this.packproductlist.length; i++) {
    //             weightcount = this.packproductlist[i].weight + weightcount
    //             numscount = this.packproductlist[i].nums + numscount
    //             processCostcount =
    //               this.packproductlist[i].processCost + processCostcount
    //           }
    //           this.bigpackdata.weight = weightcount
    //           this.bigpackdata.nums = numscount
    //           this.bigpackdata.processCost = processCostcount
    //           //清空产品信息列表
    //           this.selectorderlist = []
    //         })
    //         .catch((e) => {
    //           this.$message.success('小包查询失败')
    //         })
    //     })
    //   } else {
    //     //限定必须先要选定需要打包的商品才能进行打包操作
    //     this.$message.success('请先选择需要打包的商品')
    //   }

    //   // // 新增一个打包单
    //   // packingList.insertPackingList(this.bigpackdata).then((res)=>{
    //   //   console.log(res);
    //   // })
    // },
    // 关闭抽屉显示打包页面
    cancelInsert() {
      this.drawer = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // // 打包方法
    // pack() {
    //   console.log('打包方法点击事件')
    //   // console.log(this.selectorderlist[0].id);
    //   this.packdata.createdTime = this.getTime()
    //   // console.log(this.packdata.createdTime);
    //   let weightcount = 0
    //   let numscount = 0
    //   //遍历获得选中的重量
    //   for (let i = 0; i < this.selectorderlist.length; i++) {
    //     weightcount = this.selectorderlist[i].productDto.weight + weightcount
    //     numscount = this.selectorderlist[i].nums + numscount
    //     this.packdata.packingId[i] = this.selectorderlist[i].id
    //   }
    //   this.packdata.weight = weightcount
    //   this.packdata.nums = numscount
    //   this.packdata.processCost = (
    //     (this.packdata.weight * this.packdata.nums) /
    //     3
    //   ).toFixed(2)
    //   this.packdata.packingNum = this.createOrder()
    //   // console.log(this.packdata.packingId)
    // },

    test() {
      // console.log(this.$data.formstatus)
      // console.log(this.$data.formdata.status)
      console.log(this.formdata.status)
    },

    //搜索该分包所属的产品信息
    searchRowPack(index, rows) {
      //@click.native.prevent="searchRowPack(scope.$index, packproductlist)"
      // console.log(index) //scope.$index
      // console.log(rows[index]) //packproductlist[index]
      addPacking.selectProductByProductId(rows[index].id).then((res) => {
        console.log(res)
        let data1 = res.data
        for (const i in data1) {
          if (data1[i].customer == 1) {
            data1[i].customer = '中国黄金'
          }
          if (data1[i].customer == 2) {
            data1[i].customer = '老凤祥'
          }
          if (data1[i].customer == 3) {
            data1[i].customer = '周大福'
          }
          if (data1[i].region == 4) {
            data1[i].customer = '盛丰黄金'
          }
          if (data1[i].region == 1) {
            data1[i].region = '华南区域'
          }
          if (data1[i].region == 2) {
            data1[i].region = '东北区域'
          }
          if (data1[i].region == 3) {
            data1[i].region = '西南区域'
          }
          if (data1[i].condition == 1) {
            data1[i].condition = '千足金999'
          }
          if (data1[i].condition == 2) {
            data1[i].condition = '万足金9999'
          }
          if (data1[i].perGram == 1) {
            data1[i].perGram = '3'
          }
          if (data1[i].perGram == 2) {
            data1[i].perGram = '4'
          } 
        }
        this.selectorderlist = res.data
        this.productShow = false
      })
    },

    //取消按钮返回搜索页面
    back() {
      this.$router.push({ path: '/packingList' })
    },

    //将复选的产品放入产品信息栏

    insert() {
      console.log(this.$data.selectorderlist)
      for (var i in this.multipleSelection) {
        this.selectorderlist.push(this.multipleSelection[i])
      }
      console.log(this.selectorderlist)
      this.count = this.selectorderlist.length
      this.$data.table = false
      this.$message.success('添加成功')
    },

    //点击添加按钮之后展示的选货单所选商品的信息
    find() {
      // console.log(this.$data.formdata)
      let id = this.bigpackdata.pid
      addPacking.getProduct(id).then((res) => {
        console.log(res)
        this.gridData = res.data
      })
    },
    //提交
    commit() {
      this.$confirm('此操作将提交本页信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //时间格式处理
          this.bigpackdata.createdTime = this.bigpackdata.createdTime.replace(
            ' ',
            'T'
          )
          //发请求新增打包
          console.log(this.bigpackdata)
          // packingList.insertPackingList(this.bigpackdata).then((res) => {
          //   console.log("提交按钮");
          //   console.log(res)
          //   this.$message({
          //     type: 'success',
          //     message: '提交成功!',
          //   })

          // }).catch(()=>{
          //   this.$message({
          //     type: 'primary',
          //     message: '提交失败!',
          //   })
          // })
          //跳转到打包单管理页面
          this.$router.push({ path: '/packingList' })
          // this.$router.push({ path: 'demandList' })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交',
          })
        })
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 全选功能方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },
    //生成分包订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'SP' + date.getTime()
      // console.log(date)
      return ordernum
    },
    //生成主包订单号
    createOrderLP() {
      var date = new Date()
      var ordernum = 'LP' + date.getTime()
      // console.log(date)
      return ordernum
    },
  },
  created() {
    this.productShow = true
    //获取选货单页面传过来的选货单的id
    this.bigpackdata.id = this.$route.query.id
    // console.log(this.bigpackdata.id)
    packingList.selectBy(this.bigpackdata).then((res) => {
      // console.log(res)
      let data2 = res.data[0]
      this.bigpackdata.packingNumber = res.data[0].packingNumber
      //数据过滤
      if (data2.customer == 1) {
        data2.customer = '中国黄金'
      }
      if (data2.customer == 2) {
        data2.customer = '老凤祥'
      }
      if (data2.customer == 3) {
        data2.customer = '周大福'
      }
      if (data2.region == 4) {
        data2.customer = '盛丰黄金'
      }
      if (data2.region == 1) {
        data2.region = '华南区域'
      }
      if (data2.region == 2) {
        data2.region = '东北区域'
      }
      if (data2.region == 3) {
        data2.region = '西南区域'
      }
      if (data2.packingStatus == 1) {
        data2.packingStatus = '编辑'
      }
      if (data2.packingStatus == 2) {
        data2.packingStatus = '待审核'
      }
      if (data2.packingStatus == 3) {
        data2.packingStatus = '进行中'
      }
      if (data2.packingStatus == 4) {
        data2.packingStatus = '完成'
      }
      if (data2.formTypes == 1) {
        data2.formTypes = '采购入库'
      }
      if (data2.formTypes == 2) {
        data2.formTypes = '采购退货'
      }
      this.bigpackdata = data2

      console.log(this.bigpackdata.packingNumber)
      addPacking
        .selectPackingMsgByPackingNum(this.bigpackdata.packingNumber)
        .then((res) => {
          console.log(res)
          let data2 = res.data
          for (const index in data2) {
            if (data2[index].warehouse == 1) {
              data2[index].warehouse = 'A仓库'
            }
            if (data2[index].warehouse == 2) {
              data2[index].warehouse = 'B仓库'
            }
            if (data2[index].warehouse == 3) {
              data2[index].warehouse = 'C仓库'
            }
          }
          this.packproductlist = res.data
        })
    })
  },
}
</script>

<style scoped>
.submitandcancel {
  float: right;
  margin-top: 10px;
}
.allinfo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  border-color: white white white skyblue;
}
.firstline {
  height: 50px;
}
</style>
